import * as React from 'react'
import classNames from 'classnames'
import { Row } from 'antd'
import * as style from './index.less'

export interface IDescriptionListProps {
  className?: any
  children?: any
  layout?: 'horizontal' | 'vertical'
  col?: number
  title?: React.ReactNode
  gutter?: number
  size?: 'large' | 'small'
  style?: React.CSSProperties
}

const DescriptionList = ({
  className,
  title,
  col = 3,
  layout = 'horizontal',
  gutter = 32,
  children,
  size,
  ...restProps
}: IDescriptionListProps) => {
  const clsString = classNames(style.descriptionList, style[layout], className, {
    [style.small]: size === 'small',
    [style.large]: size === 'large',
  })
  const column = col > 4 ? 4 : col
  return (
    <div className={clsString} {...restProps}>
      {title ? <div className={style.title}>{title}</div> : null}
      <Row gutter={gutter}>
        {React.Children.map(
          children,
          (child: any) => (child ? React.cloneElement(child, { column }) : child)
        )}
      </Row>
    </div>
  )
}
export default DescriptionList
